import { Avatar, Divider } from 'antd-mobile';
import { LoginBoxWrapper } from './loginBox.styled';
import { RightOutline, MessageOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { useAppSelector } from '../../hooks/redux/index';
const LoginBox = () => {
    const navigate = useNavigate();

    const { userInfo } = useAppSelector((store) => store.user);
    const isLogin = userInfo.code === 200;

    const toLogin = () => {
        if (isLogin) return;
        navigate('/login');
    };

    const UserInfoBox = () => {
        return (
            <div>
                <div className="nickName">{userInfo.profile.nickname}</div>
                <div className="subInfo">
                    <span>{userInfo.profile.follows} 关注</span>
                    <Divider
                        direction="vertical"
                        style={{
                            borderColor: '#666'
                        }}
                    />
                    <span>{userInfo.profile.followeds} 粉丝</span>
                </div>
            </div>
        );
    };

    return (
        <LoginBoxWrapper className="common-shadow common-padding" onClick={toLogin}>
            <div className="left">
                <Avatar
                    style={{ '--size': '56px', borderRadius: '50%' }}
                    src={userInfo.profile.avatarUrl || ''}
                    className="avatar"
                ></Avatar>
                {isLogin ? <UserInfoBox /> : <span className="tipText">点击登录</span>}
            </div>
            {!isLogin && <RightOutline />}
        </LoginBoxWrapper>
    );
};

export default LoginBox;
